import Taro, { Component } from '@tarojs/taro';
import { View, Input, Image, Text, Picker } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';

@connect(({addressUpdate}) => ({
  ...addressUpdate,
}))
export default class Addressupdate extends Component {
  config = {
    navigationBarTitleText: '',
  };

  componentDidMount = () => {
    this.props.dispatch({
      type: 'addressUpdate/getDistricts',
      payload: {
        send_cities: 0,
      },
    });
  };

  // picker选择数据动态渲染
  onColumnchange = (e) => {
    const { column, value} = e.detail;
    const { cities, districts } = this.props;
    const arr = JSON.parse(JSON.stringify(districts));
    if (column == 0) {
      arr[1] = [];
      arr[2] = [];
      cities[value].cities.forEach(item => {
        arr[1].push({
          key: item.key,
          name: item.name,
        })
      });
      cities[value].cities[0].regions.forEach(item => {
        arr[2].push({
          key: item.key,
          name: item.name,
        })
      });
    }
    if (column == 1) {
      arr[2] = [];
      cities[value].cities[0].regions.forEach(item => {
        arr[2].push({
          key: item.key,
          name: item.name,
        })
      });
    }
    this.props.dispatch({
      type: 'addressUpdate/save',
      payload: {
        districts: arr,
      },
    })
  }

  // picker赋值
  onChange = (e)=> {
    const { value } = e.detail;
    const { cities } = this.props;
    const detail = cities[value[0]].cities[value[1]].regions[value[2]];
    this.props.dispatch({
      type: 'addressUpdate/save',
      payload: {
        pickerValue: value,
        showValue: {
          region_code: detail.key,
          region_name: detail.fullname,
        }
      },
    })
  }

  update = (event) => {
    const { value, id } = event.target;
    this.props.dispatch({
      type: 'addressUpdate/save',
      payload: { [id]: value },
    });
  }

  // 保存提交
  submit = () => {
    const { showValue, contact_name, contact_mobile, address_detail } = this.props;
    if (contact_name === '') {
      Taro.showToast({
        title: '请输入收货人',
        icon: 'none',
      });
      return;
    }
    if (!/^1[234578]\d{9}$/.test(contact_mobile)) {
      Taro.showToast({
        title: '手机号格式不正确',
        icon: 'none',
      });
      return;
    }
    if (showValue.region_name === '') {
      Taro.showToast({
        title: '请选择收货地址',
        icon: 'none',
      });
      return;
    }
    if (address_detail === '') {
      Taro.showToast({
        title: '请输入详细地址',
        icon: 'none',
      });
      return;
    }
    this.props.dispatch({
      type: 'addressUpdate/submit',
      payload: {
        showValue,
        contact_name,
        contact_mobile,
        address_detail
      },
    });
  }

  // 删除地址
  delete = ()=> {
    Taro.showModal({
      content: '是否删除该地址？'
    })
    .then(res => {
      if (res.confirm) {
        this.props.dispatch({
          type: 'addressUpdate/removeAddress',
        });
      }
    })
  }

  render() {
    const { addressId, districts, pickerValue, showValue, contact_name, contact_mobile, address_detail } = this.props;
    return (
      <View className="addressUpdate-page">
      <View className="head">{addressId && addressId !== '' ? '编辑地址' : '添加地址'}</View>
      <View className="form">
        <Input
          placeholder="收件人"
          id="contact_name"
          value={contact_name}
          onInput={this.update}
        />
        <Input
          type="number"
          maxLength="11"
          placeholder="手机号码"
          id="contact_mobile"
          value={contact_mobile}
          onInput={this.update}
        />
        <Picker className="picker" mode="multiSelector" rangeKey="name" range={districts}
          onColumnchange={this.onColumnchange}
          onChange={this.onChange}
          value={pickerValue}>
          {showValue.region_name == '' ? (
            <View className="label">
              省、市、区
              <View className="iconfont icon-more arrow"></View>
            </View>
          ) : (
            <View className="picker-item">
              {showValue.region_name}
              <View className="iconfont icon-more arrow"></View>
            </View>
          )}
        </Picker>
        <Input
          placeholder="详细地址"
          id="address_detail"
          value={address_detail}
          onInput={this.update}
        />
      </View>
      <View className="bottom-btn">
        {addressId && addressId !== '' && (
          <View className="confirm remove" onClick={this.delete}>
            <Image mode="widthFix" src={require('../../images/icon/times.png')} />
            <Text>删除</Text>
          </View>
        )}
        <View className="confirm" onClick={this.submit}>
          <Image mode="widthFix" src={require('../../images/icon/check.png')} />
          <Text>保存</Text>
        </View>
      </View>
    </View>
    )
  }
}
